<template>
	<div class="pages_content noticeEdit">
		<el-container>
			<el-header>
				<div>
					<el-button icon="el-icon-d-arrow-left" style="margin-left: 0;" size="medium" class="bottom_all_two" @click=" exit()">返回</el-button>
					<el-button size="medium" class="bottom_all" @click="save('0')">保存</el-button>
					<el-button size="medium" class="bottom_all_two" @click="save('1')">发布</el-button>
					<el-button v-if="showsee" size="medium" class="botton_five" style="margin-left: 24px;" @click="showsee=false">编辑</el-button>
					<el-button v-if="!showsee" size="medium" class="botton_five" style="margin-left: 24px;" @click="showsee=true">预览</el-button>
				</div>
			</el-header>
			<el-main v-show="!showsee">
				<div class="tc-title">
					<el-input v-model="form.title" placeholder="请输入标题" />
				</div>
				<!-- <div class="title"><el-input v-model="form.title" placeholder="<请输入标题>"></el-input></div> -->
				<div class="input">
					<span>
						<div class="text" style="color: #FF0000;">*信息类别：</div>
						<el-select v-model="form.infoTypeId" placeholder="请选择">
							<el-option v-for="(item, index) in infoTypeoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
						</el-select>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*优先级：</div>
						<el-select v-model="form.priorityNum" placeholder="请选择">
							<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*发布机构：</div>
						<el-input v-model="text" disabled placeholder="请输入内容"></el-input>
					</span>
				</div>
				<div class="input">
					<span>
						<div class="text" style="color: #FF0000;">*生效时间：</div>
						<el-date-picker v-model="form.effectTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择"></el-date-picker>
					</span>
					<span>
						<div class="text">截止时间：</div>
						<el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择"></el-date-picker>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*密级：</div>
						<el-select v-model="form.secretLevelId" placeholder="请选择">
							<el-option v-for="(item, index) in secretLeveoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
						</el-select>
					</span>
				</div>
				<div class="input-two">
					<div class="text">主题词：</div>
					<el-input v-model="form.subjectWord" placeholder="请输入内容"></el-input>
				</div>
				<div class="person">
					<div class="text" style="color: #FF0000;">*接收人：</div>
					<div class="item">
						<div>
							<el-link :underline="false" @click="addUserlist()">添加</el-link>
						</div>
						<div v-for="(item, index) in form.receiveUserList" :key="index">
							<span>{{item.userName}}</span>
							<i class="icon iconfont iconzu2197" @click="delUserList(index)"></i>
						</div>
					</div>
				</div>
				<div class="person">
					<div class="text" style="padding-top: 5px;">信息正文：</div>
					<div class="upload-item">
						<FileComponent fileCode="noticeboyFile" :files="textContent" @deleteFile="deleteFile1" @uplodeSuccess="uplodeSuccess1" />
					</div>
				</div>
				<div class="person">
					<div class="text" style="padding-top: 5px;">上传附件：</div>
					<div class="upload-item">
						<FileComponent fileCode="noticeattachFile" :files="enclosureData" @deleteFile="deleteFile2" @uplodeSuccess="uplodeSuccess2" />
					</div>
				</div>
				<div class="editor">
					<editor-bar :value="form.richText" @geteditor="geteditor"></editor-bar>
				</div>
			</el-main>
			<el-main v-show="showsee">
				<div class="tc-title">
					<div style="    border-radius: 4px;text-align: center;font-weight: 500; font-size: 24px;background: #fbfcff;border: 1px solid #e1e5ed;line-height:106px">{{form.title}}</div>
				</div>
				<!-- <div class="title"><el-input v-model="form.title" placeholder="<请输入标题>"></el-input></div> -->
				<div class="input">
					<span>
						<div class="text" style="color: #FF0000;">*信息类别：</div>
						<el-select v-model="form.infoTypeId" disabled placeholder="请选择">
							<el-option v-for="(item, index) in infoTypeoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
						</el-select>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*优先级：</div>
						<el-select v-model="form.priorityNum" disabled placeholder="请选择">
							<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*发布机构：</div>
						<div>{{text}}</div>
					</span>
				</div>
				<div class="input">
					<span>
						<div class="text" style="color: #FF0000;">*生效时间：</div>
						<div>{{form.effectTime}}</div>
					</span>
					<span>
						<div class="text">截止时间：</div>
						<div>{{form.endTime}}</div>
					</span>
					<span>
						<div class="text" style="color: #FF0000;">*密级：</div>
						<el-select v-model="form.secretLevelId" disabled placeholder="请选择">
							<el-option v-for="(item, index) in secretLeveoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
						</el-select>
					</span>
				</div>
				<div class="input-two">
					<div class="text">主题词：</div>
					<div style="overflow:hidden;text-overflow:ellipsis; white-space:nowrap;width:80%;cursor: pointer;" :title="form.subjectWord">{{form.subjectWord}}</div>
				</div>
				<div class="person">
					<div class="text" style="color: #FF0000;">*接收人：</div>
					<div class="item">
						<div v-for="(item, index) in form.receiveUserList" :key="index">
							<span>{{item.userName}}</span>
						</div>
					</div>
				</div>
				<div class="person">
					<div class="text" style="padding-top: 5px;">信息正文：</div>
					<div class="upload-item">
						<div class="upload-item-text">
							<i class="icon iconfont iconhome_icon_txt"></i>
							<span>{{textContent.fileName}}</span>
						</div>
					</div>
				</div>
				<div class="person">
					<div class="text" style="padding-top: 5px;">上传附件：</div>
					<div class="upload-item">
						<div v-for="(item, index) in form.enclosureData" :key="index" class="upload-item-text">
							<i class="icon iconfont iconhome_icon_txt"></i>
							<span>{{item.fileName}}</span>
						</div>
					</div>
				</div>
				<div>
					<div style="width:100%;word-break:break-all;" v-html="form.richText"></div>
					<!-- <editor-bar :value="form.richText" @geteditor="geteditor"></editor-bar> -->
				</div>
			</el-main>
		</el-container>
		<personModel :strictly='true' :visible='UserListopstatus' :choisedDatas="choisedData" @closeModel='UserListopstatus=false' @getPerson='getPerson' />
	</div>
</template>

<script>
import FileComponent from '@/components/File/fileComponent';
import personModel from '@/components/ChoisePerson/personModel';
import { saveOrUpdate, getDetail } from '@/api/basedata/notice.js';
import { getDicType } from '@/api/common';
import EditorBar from '@/components/wangEnduit'
import addTab from "@/common/addTab.js";
import { getUserInfo } from "@/utils/auth.js"
export default {
	components: { EditorBar, FileComponent, personModel },
	data() {
		return {
			checkindex: 0,
			organizationName: '',
			UserListoption: [],
			chenckuser: [],
			UserListopstatus: false,
			options: [{ label: '极高', value: 1 }, { label: '高', value: 2 }, { label: '中', value: 3 }, { label: '低', value: 4 }],
			secretLeveoptions: [],
			infoTypeoptions: [],
			choisedData: [],
			form: {
				endTime: '',
				effectTime: '',
				priorityNum: 1,
				infoTypeId: '',
				receiveUserList: [],
				subjectWord: '',
				secretLevelId: '',
				title: '',
				/*发布组织机构不明晰和发布人来源用户信息*/
				organizationId: '',
				richText: '',
				publishUserId: '',
			},
			textContent: [],
			enclosureData: [],
			appPackage: [],
			text: '',
			showsee: false,
		};
	},
	async	created() {
		let _this = this
		if (_this.$route.query.id) {
			await getDetail(_this.$route.query.id).then(res => {
				_this.form = res.data;
				_this.enclosureData = JSON.parse(res.data.enclosure);
				_this.textContent = JSON.parse(res.data.textContent);
				const newData = JSON.parse(res.data.receivedBy).map(item => ({ userId: item.userId, userName: item.userName, type: item.type }));
				_this.form.receiveUserList = newData;
			});
		}
		_this.text = getUserInfo().organizationShowInfo
		await getDicType({ code: 'secretLeve' }).then(res => {
			_this.secretLeveoptions = res.data.items
		});
		await getDicType({ code: 'infoType' }).then(res => {
			_this.infoTypeoptions = res.data.items
		});
	},
	methods: {
		deleteFile1(index) {
			this.textContent.splice(index, 1);
		},
		uplodeSuccess1(data) {
			this.textContent.push(data);
		},
		deleteFile2(index) {
			this.enclosureData.splice(index, 1);
		},
		uplodeSuccess2(data) {
			this.enclosureData.push(data);
		},
		geteditor(text) {
			this.form.richText = text
		},
		addUserlist() {
			this.chenckuser = []
			this.form.receiveUserList.forEach(a => {
				this.chenckuser.push(a.userId)
			})
			this.choisedData = this.form.receiveUserList.map((item) => ({ name: item.userName, id: item.userId, type: item.type }));
			console.log(JSON.parse(JSON.stringify(this.choisedData)))
			this.UserListopstatus = true
		},
		delUserList(index) {
			this.form.receiveUserList.splice(index, 1)
		},
		getPerson(data) {
			const newData = data.map(item => ({ userId: item.id, userName: item.name, type: item.type }))
			this.form.receiveUserList = newData;
			console.log(this.form.receiveUserList);
			this.UserListopstatus = false;
		},
		exit() {
			this.$router.push({ name: 'notice' });
		},
		save(a) {
			let _this = this
			if (a == 1 && this.form.receiveUserList.length == 0) {
				this.$message({
					message: '警告哦，请先选择接受人员或组织',
					type: 'warning'
				});
				return
			}
			this.form.receivedBy = JSON.stringify(this.form.receiveUserList)
			const copyData1 = JSON.parse(JSON.stringify(this.enclosureData));
			const copyData2 = JSON.parse(JSON.stringify(this.textContent));
			this.form.enclosure = JSON.stringify(copyData1);
			this.form.textContent = JSON.stringify(copyData2);
			saveOrUpdate({ ...this.form, publishStatus: a }).then((res) => {
				if (res.code == 1001) {
					this.$message({
						message: `${a == 0 ? '保存' : '发布'}成功`,
						type: 'success'
					});
					_this.$router.push({ name: 'notice' });
				}
			});
		}
	},
	beforeDestroy() {
		addTab.$emit("remove", 'noticeEdit');
	},
};
</script>
<style lang="scss" scoped>
.scroll {
  height: calc(85vh - 213px);
}
.editor {
  height: 80vh;
}
.el-checkbox-group {
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}
.user {
  line-height: 24px;
  font-size: $font_size;
  color: #4b4c4d;
  font-weight: 400;
  width: 200px;
}
.upload-item {
  width: calc(100% - 100px);
  display: flex;
  flex-wrap: wrap;
  .upload-item-text {
    cursor: pointer;
    padding: 5px 10px;
    margin: 0 10px 10px 10px;
    border: 1px solid #e1e5ed;
    border-radius: 4px;
    .iconhome_icon_txt {
      color: $bg_color;
      margin-right: 5px;
      font-size: 14px;
    }
    .iconzu2197:hover {
      color: $bg_color;
    }
    .iconzu2197 {
      margin-left: 5px;
      color: #c0c4cc;
      font-size: 14px;
    }
  }
}
.el-link {
  color: $bg_color;
}
.el-link:hover {
  color: $bg_color;
  opacity: 0.7;
}
.noticeEdit {
  .person {
    font-size: 14px;
    display: flex;
    padding: 10px 0 0 0;
    .text {
      padding: 0 10px 10px 0px;
      width: 100px;
    }
    .item {
      width: calc(100% - 100px);
      display: flex;
      flex-wrap: wrap;
      div {
        cursor: pointer;
        padding: 0 10px 10px 10px;
        .iconzu2197:hover {
          color: $bg_color;
        }
        .iconzu2197 {
          margin-left: 5px;
          font-size: 14px;
          color: #c0c4cc;
        }
      }
    }
  }
  box-shadow: 0px 0px 0px;
  background: rgba(0, 0, 0, 0);
  font-size: $font_size;
  .input-two {
    height: 50px;
    @include discen_al;
    > .text {
      width: 100px;
    }
    .el-input {
      width: 80%;
    }
  }
  .input {
    height: 50px;
    @include discen_al;
    justify-content: space-between;
    > span {
      width: 33%;
      > .text {
        width: 100px;
      }
      .el-input,
      .el-select {
        width: 60%;
      }
      @include discen_al;
    }
  }
  .el-header {
    box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
    background: #ffffff;
  }
  .el-main {
    box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
}
</style>
<style lang="scss">
.tc-title {
  margin: 0 0 15px;
  .el-input--small .el-input__inner {
    height: 108px;
  }
  input {
    // border: 0;
    border-radius: 4px;
    outline: none;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    background: #fbfcff;
    border: 1px solid rgba(225, 229, 237, 1);
  }
  input:focus {
    outline: none;
    border: 1px solid rgba(225, 229, 237, 1);
    // border: 0;
  }
  input::-webkit-input-placeholder {
    color: #000000;
    display: flex;
  }
}
.noticeEdit {
  .el-select .el-input.is-disabled .el-input__inner {
    border: 0;
    background: #fff;
    color: #000;
  }
  .el-upload {
    height: 30px;
    display: flex;
    align-items: center;
  }
}
</style>
